<template>
    <div class="search"></div>
    <div class="echart">
        <Chart :width=store.echarts3.width :height=store.echarts3.height :options="store.echarts3.options"></Chart>
    </div>
    <div class="table">
        <div class="top">
            <div class="left"> 新增线索：200，新增商机：200，新增客户：200，新增订单：200</div>
            <div class="right"></div>
        </div>
        <el-table :data="tableData" stripe :border="true" :size="large" :row-style="{ height: '50px' }">
            <el-table-column prop="date" label="时间" />
            <el-table-column prop="xiansuo" label="新增线索" />
            <el-table-column prop="shangji" label="新增商机" />
            <el-table-column prop="kehu" label="新增客户" />
            <el-table-column prop="dingdan" label="新增订单" />
        </el-table>

    </div>
    <div class="reg">
        <p>Copyright © www.AxureUX.com, All Rights Reserved.</p>
        <p>专业的交互原型素材原创分享平台</p>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import Chart from '../../components/MyEcharts'
import { useStore } from '../../store/zsz/index'
const store = useStore()

const tableData = [
  {
    date: '2019-01',
    xiansuo: 200,
    shangji: 200,
    kehu: 200,
    dingdan:200
  },
  {
    date: '2019-02',
    xiansuo: 200,
    shangji: 200,
    kehu: 200,
    dingdan:200
  },
  {
    date: '2019-03',
    xiansuo: 200,
    shangji: 200,
    kehu: 200,
    dingdan:200
  },
  {
    date: '2019-04',
    xiansuo: 200,
    shangji: 200,
    kehu: 200,
    dingdan:200
  },
  {
    date: '2019-05',
    xiansuo: 200,
    shangji: 200,
    kehu: 200,
    dingdan:200
  },
  {
    date: '2019-05',
    xiansuo: 200,
    shangji: 200,
    kehu: 200,
    dingdan:200
  },
  {
    date: '2019-07',
    xiansuo: 200,
    shangji: 200,
    kehu: 200,
    dingdan:200
  },
  {
    date: '2019-08',
    xiansuo: 200,
    shangji: 200,
    kehu: 200,
    dingdan:200
  },
  {
    date: '2019-09',
    xiansuo: 200,
    shangji: 200,
    kehu: 200,
    dingdan:200
  },
  {
    date: '2019-10',
    xiansuo: 200,
    shangji: 200,
    kehu: 200,
    dingdan:200
  },
  {
    date: '2019-11',
    xiansuo: 200,
    shangji: 200,
    kehu: 200,
    dingdan:200
  },
  {
    date: '2019-12',
    xiansuo: 200,
    shangji: 200,
    kehu: 200,
    dingdan:200
  },
 


]
</script>

<style lang='scss' scoped>
.search {
    height: 110px;
    background-color: white;
}

.echart {
    height: 440px;
    background-color: white;
    margin: 14px 0;
}

.table {
    padding: 0px 20px;
    height: 780px;
    background-color: white;
    width: 100%;


    .top {
        height: 80px;
        line-height: 80px;
        color: #666666;
    }

    .main {
        height: calc(900px - 80px);
    }
}

.reg {
    text-align: center;
    color: #cccccc;
    padding-top: 30px;
    margin-top: 20px;
    height: 140px;
    font-size: 14px;
}
</style>